<template>
  <div class="customer-page-container">
    <!-- 搜索表单区域 -->
    <div class="search-form">

      <el-form :inline="true" :model="pageObj.page" label-width="90px">
        <el-form-item label="司机姓名">
          <el-input v-model="pageObj.page.driverUser.driverName" placeholder="输入司机姓名搜索" clearable />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="pageObj.page.driverUser.driverPhone" placeholder="输入手机号搜索" clearable />
        </el-form-item>
        <el-form-item label="驾驶证号">
          <el-input v-model="pageObj.page.driverUser.licenseId" placeholder="输入驾驶证号搜索" clearable />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="pageObj.page.driverUser.address" placeholder="输入地址搜索" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findData(1)">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-buttons">
      <el-button type="primary" @click="showDialog()">新 增</el-button>
      <el-button type="danger" plain @click="deleteBacthed()"
        :disabled="multipleSelection.length === 0">批量删除</el-button>
    </div>

    <!-- 表格区域 -->

    <el-table :data="pageObj.parmData" class="customer-table" @selection-change="handleSelectionChange" stripe border>
      <!-- 基础选择列和ID -->
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" prop="id" width="80" align="center" />

      <!-- 司机基础信息 -->
      <el-table-column label="注册地代码" prop="address" width="120" align="center" show-overflow-tooltip />
      <el-table-column label="司机姓名" prop="driverName" width="120" align="center" show-overflow-tooltip />
      <el-table-column label="手机号" prop="driverPhone" width="120" align="center" />
      <el-table-column label="性别" prop="driverGender" width="80" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.driverGender === 1 ? 'primary' : (scope.row.driverGender === 2 ? 'danger' : 'info')">
            {{ scope.row.driverGender === 1 ? '男' : (scope.row.driverGender === 2 ? '女' : '未知') }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="出生日期" prop="driverBirthday" width="120" align="center" />
      <el-table-column label="民族代码" prop="driverNation" width="80" align="center" />
      <el-table-column label="联系地址" prop="driverContactAddress" width="200" align="center" show-overflow-tooltip />

      <!-- 驾驶证信息 -->
      <el-table-column label="驾驶证号" prop="licenseId" width="180" align="center" show-overflow-tooltip />
      <el-table-column label="初次领证日期" prop="getDriverLicenseDate" width="140" align="center" />
      <el-table-column label="驾驶证有效期起" prop="driverLicenseOn" width="140" align="center" />
      <el-table-column label="驾驶证有效期止" prop="driverLicenseOff" width="140" align="center" />
      <el-table-column label="是否巡游出租车" prop="taxiDriver" width="130" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.taxiDriver === 1 ? 'success' : 'info'">
            {{ scope.row.taxiDriver === 1 ? '是' : (scope.row.taxiDriver === 0 ? '否' : '未设置') }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- 网络预约资格证信息 -->
      <el-table-column label="资格证号" prop="certificateNo" width="180" align="center" show-overflow-tooltip />
      <el-table-column label="发证机构" prop="networkCarIssueOrganization" width="180" align="center"
        show-overflow-tooltip />
      <el-table-column label="资格证发证日期" prop="networkCarIssueDate" width="140" align="center" />
      <el-table-column label="初次领取资格证日期" prop="getNetworkCarProofDate" width="160" align="center" />
      <el-table-column label="资格证有效期起" prop="networkCarProofOn" width="140" align="center" />
      <el-table-column label="资格证有效期止" prop="networkCarProofOff" width="140" align="center" />

      <!-- 合同与状态信息 -->
      <el-table-column label="报备日期" prop="registerDate" width="120" align="center" />
      <el-table-column label="服务类型" prop="commercialType" width="140" align="center">
        <template #default="scope">
          <el-tag
            :type="scope.row.commercialType === 1 ? 'primary' : (scope.row.commercialType === 2 ? 'success' : 'warning')">
            {{
              scope.row.commercialType === 1 ? '网络预约' :
                (scope.row.commercialType === 2 ? '巡游出租' : '私人合乘')
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="签约公司" prop="contractCompany" width="180" align="center" show-overflow-tooltip />
      <el-table-column label="合同有效期起" prop="contractOn" width="140" align="center" />
      <el-table-column label="合同有效期止" prop="contractOff" width="140" align="center" />
      <el-table-column label="司机状态" prop="state" width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.state === 0 ? 'success' : 'danger'">
            {{ scope.row.state === 0 ? '有效' : '失效' }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" align="center" width="120" fixed="right">
        <template #default="scope">
          <el-button size="small" :icon="Edit" circle type="primary" title="编辑"
            @click="handleEdit(scope.row)"></el-button>
          <el-button size="small" :icon="Delete" circle type="danger" title="删除"
            @click="handleDelete(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination background layout="prev, pager, next, total" :total="pageObj.page.total"
        :page-size="pageObj.page.pageSize" :current-page="pageObj.page.pageNum" @current-change="findData" />
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog v-model="pageObj.dialogObj.dialogFormVisible" draggable :title="pageObj.dialogObj.title" width="60%"
      class="customer-dialog">
      <el-form :model="pageObj.parm" label-position="right" label-width="120px" ref="driverFormRef" :rules="formRules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="ID" prop="id" >
              <el-input v-model="pageObj.parm.id"  :disabled="pageObj.dialogObj.isEdit" />
            </el-form-item>
            <el-form-item label="司机姓名" prop="driverName">
              <el-input v-model="pageObj.parm.driverName" placeholder="请输入司机姓名" />
            </el-form-item>
            <el-form-item label="手机号" prop="driverPhone">
              <el-input v-model="pageObj.parm.driverPhone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="性别" prop="driverGender">
              <el-select v-model="pageObj.parm.driverGender" placeholder="请选择性别">
                <el-option label="男" :value="1" />
                <el-option label="女" :value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="出生日期" prop="driverBirthday">
              <el-date-picker v-model="pageObj.parm.driverBirthday" type="date" placeholder="选择出生日期"
                value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族" prop="driverNation">
              <el-input v-model="pageObj.parm.driverNation" placeholder="请输入民族" />
            </el-form-item>
            <el-form-item label="注册地代码" prop="address">
              <el-input v-model="pageObj.parm.address" placeholder="请输入注册地行政区划代码" />
            </el-form-item>
            <el-form-item label="联系地址" prop="driverContactAddress">
              <el-input v-model="pageObj.parm.driverContactAddress" placeholder="请输入联系地址" />
            </el-form-item>
            <el-form-item label="驾驶证号" prop="licenseId">
              <el-input v-model="pageObj.parm.licenseId" placeholder="请输入驾驶证号" />
            </el-form-item>
            <el-form-item label="领证日期" prop="getDriverLicenseDate">
              <el-date-picker v-model="pageObj.parm.getDriverLicenseDate" type="date" placeholder="选择领证日期"
                value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="驾驶证有效期起" prop="driverLicenseOn">
              <el-date-picker v-model="pageObj.parm.driverLicenseOn" type="date" placeholder="选择起始日期"
                value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="驾驶证有效期止" prop="driverLicenseOff">
              <el-date-picker v-model="pageObj.parm.driverLicenseOff" type="date" placeholder="选择结束日期"
                value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="服务类型" prop="commercialType">
              <el-select v-model="pageObj.parm.commercialType" placeholder="请选择服务类型">
                <el-option label="网络预约出租汽车" :value="1" />
                <el-option label="巡游出租汽车" :value="2" />
                <el-option label="私人小客车合乘" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否巡游出租" prop="taxiDriver">
              <el-select v-model="pageObj.parm.taxiDriver" placeholder="请选择">
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="资格证号" prop="certificateNo">
              <el-input v-model="pageObj.parm.certificateNo" placeholder="请输入资格证号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发证机构" prop="networkCarIssueOrganization">
              <el-input v-model="pageObj.parm.networkCarIssueOrganization" placeholder="请输入发证机构" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="资格证有效期起" prop="networkCarProofOn">
              <el-date-picker v-model="pageObj.parm.networkCarProofOn" type="date" placeholder="选择起始日期"
                value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资格证有效期止" prop="networkCarProofOff">
              <el-date-picker v-model="pageObj.parm.networkCarProofOff" type="date" placeholder="选择结束日期"
                value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="报备日期" prop="registerDate">
              <el-date-picker v-model="pageObj.parm.registerDate" type="date" placeholder="选择报备日期"
                value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属公司" prop="contractCompany">
              <el-input v-model="pageObj.parm.contractCompany" placeholder="请输入所属公司" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同开始日期" prop="contractOn">
              <el-date-picker v-model="pageObj.parm.contractOn" type="date" placeholder="选择开始日期"
                value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同结束日期" prop="contractOff">
              <el-date-picker v-model="pageObj.parm.contractOff" type="date" placeholder="选择结束日期"
                value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="状态" prop="state">
              <el-select v-model="pageObj.parm.state" placeholder="请选择状态">
                <el-option label="有效" :value="1" />
                <el-option label="无效" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="pageObj.dialogObj.dialogFormVisible = false">关 闭</el-button>
          <el-button type="primary" @click="submitForm()">{{ pageObj.dialogObj.submitBtnTxt }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import axios from 'axios';
import { reactive, ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit } from '@element-plus/icons-vue';
import { driverService } from '../stores/driver.ts';




// 页面数据对象
const pageObj = reactive({
  page: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    // 搜索参数
    driverUser: {
      address: '',
      driverName: '',
      driverPhone: '',
      licenseId: '',
    }
  },
  parmData: [], // 表格数据列表
  parm: { // 表单数据
    // 数据库字段映射
    id: null,                     // 主键ID
    address: '',                  // 司机注册地行政区划代码
    driverName: '',               // 对应数据库driver_name
    driverPhone: '',              // 对应数据库driver_phone
    driverGender: null,           // 1:男，2：女
    driverBirthday: null,         // 出生日期
    driverNation: '',             // 驾驶员民族
    driverContactAddress: '',     // 联系地址
    licenseId: '',                // 机动车驾驶证号
    getDriverLicenseDate: null,   // 初次领取驾驶证日期
    driverLicenseOn: null,        // 驾驶证有效期起
    driverLicenseOff: null,       // 驾驶证有效期止
    taxiDriver: null,             // 是否巡游出租汽车：1：是，0：否
    certificateNo: '',            // 网络预约出租汽车驾驶员资格证号
    networkCarIssueOrganization: '', // 发证机构
    networkCarIssueDate: null,    // 资格证发证日期
    getNetworkCarProofDate: null, // 初次领取资格证日期
    networkCarProofOn: null,      // 资格证有效起始日期
    networkCarProofOff: null,     // 资格证有效截止日期
    registerDate: null,           // 报备日期
    commercialType: null,         // 服务类型：1：网络预约，2：巡游，3：私人小客车合乘
    contractCompany: '',          // 合同签署公司
    contractOn: null,             // 合同有效期起
    contractOff: null,            // 合同有效期止
    state: 0                      // 司机状态：0：有效，1：失效（修正默认值）
  },
  dialogObj: {
    dialogFormVisible: false,
    title: '新增司机',
    submitBtnTxt: '添  加',
    isEdit: false // 是否为编辑状态
  }
});

// 表单引用
const driverFormRef = ref(null);

// 选中的行数据
const multipleSelection = ref([]);

// 页面加载时查询数据
onMounted(() => {
  findData(1);
});

// 查询数据
const findData = async (pageNum) => {
  pageObj.page.pageNum = pageNum;
  const res = await driverService.findDriver(pageObj.page)
  console.log("从后端拿到的司机数据——————————", res);
  pageObj.parmData = res

};

// 显示新增/编辑对话框
const showDialog = (row = null) => {
  // 重置表单验证状态和数据
  if (driverFormRef.value) {
    driverFormRef.value.resetFields();
  }

  if (row) {
    // 编辑状态：填充表单数据
    pageObj.parm = { ...row };
    pageObj.dialogObj.title = "编辑司机";
    pageObj.dialogObj.submitBtnTxt = "修  改";
    pageObj.dialogObj.isEdit = true;
  } else {
    // 新增状态：清空表单数据
    pageObj.parm = {
      id: null,
      address: '',
      driverName: '',
      driverPhone: '',
      driverGender: null,
      driverBirthday: null,
      driverNation: '',
      driverContactAddress: '',
      licenseId: '',
      getDriverLicenseDate: null,
      driverLicenseOn: null,
      driverLicenseOff: null,
      taxiDriver: null,
      certificateNo: '',
      networkCarIssueOrganization: '',
      networkCarIssueDate: null,
      getNetworkCarProofDate: null,
      networkCarProofOn: null,
      networkCarProofOff: null,
      registerDate: null,
      commercialType: null,
      contractCompany: '',
      contractOn: null,
      contractOff: null,
      state: 0 // 默认状态为有效
    };
    pageObj.dialogObj.title = "新增司机";
    pageObj.dialogObj.submitBtnTxt = "添  加";
    pageObj.dialogObj.isEdit = false;
  }

  // 显示对话框
  pageObj.dialogObj.dialogFormVisible = true;
};

// 提交表单（新增/编辑共用）
const submitForm = async () => {
  // 表单验证
  if (!driverFormRef.value) return;
  const valid = await driverFormRef.value.validate();
  if (!valid) return;

  try {
    if (pageObj.dialogObj.isEdit) {
      // 编辑操作：调用后端更新接口
      await driverService.updateDriver(pageObj.parm);
      ElMessage.success("司机信息更新成功");
    } else {
      // 新增操作：调用后端新增接口
      await driverService.addDriver(pageObj.parm);
      ElMessage.success("司机信息新增成功");
    }

    // 关闭对话框并刷新数据
    pageObj.dialogObj.dialogFormVisible = false;
    findData(1); // 刷新表格数据
  } catch (error) {
    // 错误处理
    ElMessage.error(error.message || "操作失败，请重试");
  }
};

// 重置搜索表单
const resetForm = () => {
  pageObj.page.driverUser = {
    address: '',
    driverName: '',
    driverPhone: '',
    licenseId: ''
  };
  findData(1);
};

// 处理表格选择变化
const handleSelectionChange = (selection) => {
  multipleSelection.value = selection;
};

// 批量删除
const deleteBacthed = async () => {
  const ids = multipleSelection.value.map(item => item.id);
  if (ids.length === 0) return;

  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${ids.length} 条司机信息吗？`,
      "删除确认",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );

    // 调用后端批量删除接口
    await driverService.updateDriver(ids);
    ElMessage.success("批量删除成功");
    findData(1); // 刷新表格
  } catch (error) {
    if (error === "cancel") return; // 取消操作不提示错误
    ElMessage.error(error.message || "批量删除失败");
  }
};

// 编辑单条数据（调用showDialog并传入当前行数据）
const handleEdit = (row) => {
  showDialog(row);
};

// 删除单条数据
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除司机【${row.driverName}】的信息吗？`,
      "删除确认",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );

    // 调用后端单条删除接口
    row.state = 1
    await driverService.updateDriver(row);
    ElMessage.success("删除成功");
    findData(1); // 刷新表格
  } catch (error) {
    if (error === "cancel") return; // 取消操作不提示错误
    ElMessage.error(error.message || "删除失败");
  }
};

</script>



<style>
/* 样式保持不变 */
.customer-page-container {
  padding: 15px;
  /* background-color: #2d3748; */
  /* 移除或注释掉纯色背景 */
  /* --- 毛玻璃效果 --- */
  background-color: rgba(45, 55, 72, 0.65);
  /* 半透明背景色 (基于 #2d3748)，调整透明度以达到满意效果 */
  backdrop-filter: blur(10px);
  /* 模糊效果，调整像素值改变模糊程度 */
  -webkit-backdrop-filter: blur(10px);
  /* 兼容 Safari */
  /* --- 结束 --- */
  border-radius: 8px;
  /* 可选：为毛玻璃区域添加圆角 */
  color: #cdd6e8;
  /* 基础文字颜色 */
  min-height: calc(100vh - 77px - 40px);
  /* 保持最小高度 */
  /* overflow-y: auto; */
  /* 滚动由父级处理 */
  /* 注意：backdrop-filter 可能会影响性能，尤其是在复杂背景或大面积使用时 */
}

/* 搜索表单区域 */
.search-form {
  /* background-color: #1f2937; */
  /* 移除或注释掉纯色背景 */
  /* --- 毛玻璃效果 --- */
  background-color: rgba(31, 41, 55, 0.75);
  /* 半透明背景色 (基于 #1f2937) */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* --- 结束 --- */
  padding: 15px 15px 0 15px;
  margin-bottom: 15px;
  border-radius: 4px;
  /* 保留圆角 */
}

/* --- 搜索框内部元素样式保持不变 --- */
.search-form .el-form-item__label {
  color: #d1d5db;
}

.search-form .el-input__wrapper {
  background-color: rgba(55, 65, 81, 0.8) !important;
  /* 输入框背景可以稍微不透明一点 */
  box-shadow: none !important;
  border: 1px solid rgba(75, 85, 99, 0.7);
  /* 边框也可以带点透明 */
}

.search-form .el-input__inner {
  color: #e5e7eb !important;
}

.search-form .el-input__inner::placeholder {
  color: #9ca3af;
}

.search-form .el-select .el-input__wrapper {
  background-color: rgba(55, 65, 81, 0.8) !important;
  border: 1px solid rgba(75, 85, 99, 0.7);
}

.search-form .el-select .el-input__inner {
  color: #e5e7eb !important;
}

/* --- Select 下拉框通常不需要毛玻璃效果，保持原样 --- */
.el-select-dropdown {
  background-color: #2d3748 !important;
  border: 1px solid #4b5563 !important;
}

/* ... (省略下拉框其他样式) ... */


/* --- 搜索按钮保持原样 --- */
.search-form .el-button--primary {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}

.search-form .el-button--primary:hover {
  background-color: #2563eb;
  border-color: #2563eb;
}

.search-form .el-button {
  /* 重置按钮 */
  background-color: #4b5563;
  border-color: #4b5563;
  color: #e5e7eb;
}

.search-form .el-button:hover {
  background-color: #6b7280;
  border-color: #6b7280;
  color: #ffffff;
}


/* 操作按钮区域 */
.action-buttons {
  margin-bottom: 15px;
}

/* --- 主要按钮保持原样 --- */
.action-buttons .el-button--primary {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}

.action-buttons .el-button--primary:hover {
  background-color: #2563eb;
  border-color: #2563eb;
}

/* 批量删除按钮 (plain) */
.action-buttons .el-button--danger.is-plain {
  color: #f87171;
  /* background: #1f2937; */
  /* 移除或注释掉纯色背景 */
  /* --- 毛玻璃效果 --- */
  background-color: rgba(31, 41, 55, 0.75);
  /* 与搜索区背景类似 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* --- 结束 --- */
  border-color: #f87171;
  border-radius: 4px;
  /* 可选：给按钮也加点圆角 */
}

.action-buttons .el-button--danger.is-plain:hover {
  background: #ef4444;
  /* 悬停时恢复不透明 */
  border-color: #ef4444;
  color: #ffffff;
  backdrop-filter: none;
  /* 悬停时移除模糊 */
  -webkit-backdrop-filter: none;
}


/* 表格样式 */
.customer-table {
  /* background-color: #1f2937; */
  /* 移除或注释掉纯色背景 */
  /* --- 毛玻璃效果 --- */
  background-color: rgba(31, 41, 55, 0.7);
  /* 表格背景透明度可以稍高 */
  backdrop-filter: blur(6px);
  /* 表格模糊度可以稍低 */
  -webkit-backdrop-filter: blur(6px);
  /* --- 结束 --- */
  border: 1px solid rgba(75, 85, 99, 0.5);
  /* 边框也带点透明 */
  border-radius: 4px;
  overflow: hidden;
  /* 必须保留，否则模糊会溢出 */
}

/* 表头 */
.customer-table .el-table__header-wrapper th {
  /* background-color: #374151 !important; */
  /* 移除或注释掉纯色背景 */
  background-color: rgba(55, 65, 81, 0.75) !important;
  /* 表头半透明背景 */
  /* backdrop-filter 对 th 可能效果不佳或不需要，主要依赖表格容器的 filter */
  color: #e5e7eb !important;
  border-bottom: 1px solid rgba(75, 85, 99, 0.6) !important;
  /* 边框也带点透明 */
  padding: 10px 0 !important;
  vertical-align: middle;
  text-align: center;
}

/* ... */


/* 表格行 */
.customer-table .el-table__row {
  /* background-color: #1f2937 !important; */
  /* 移除或注释掉纯色背景 */
  background-color: transparent !important;
  /* 行本身透明，依赖表格的毛玻璃背景 */
  color: #cdd6e8 !important;
}

.customer-table .el-table__row:hover>td {
  background-color: rgba(45, 55, 72, 0.5) !important;
  /* 悬停时给一个半透明高亮 */
  color: #ffffff !important;
}

/* 斑马纹 */
.customer-table .el-table__row.el-table__row--striped {
  background-color: rgba(37, 48, 65, 0.3) !important;
  /* 斑马纹给一个非常淡的半透明色 */
}

.customer-table .el-table__row.el-table__row--striped:hover>td {
  background-color: rgba(45, 55, 72, 0.5) !important;
  /* 悬停时统一高亮 */
}


/* --- 表格单元格、标签、按钮、分页样式通常保持原样 --- */
/* ... (省略) ... */


/* --- 对话框保持不透明 --- */
.customer-dialog .el-dialog {
  background-color: #2d3748;
  border-radius: 8px;
}

/* ... (省略对话框样式) ... */


/* 固定列 */
.el-table__fixed-right {
  /* background-color: #1f2937; */
  /* 移除或注释掉纯色背景 */
  /* --- 毛玻璃效果 --- */
  background-color: rgba(31, 41, 55, 0.75);
  /* 与表格背景类似或稍不透明 */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* --- 结束 --- */
}

.el-table__fixed-right::before {
  background-color: transparent;
  /* 固定列的阴影在毛玻璃下通常不需要或效果不好 */
}
</style>
